<template>
  <div id="app">
    <div class="table-warp">
      <div class="operator">
        <div class="color-picker">
          表格边框：
          <el-select v-model="borderType" placeholder="请选择表格类型" size="mini" class="border-type">
            <el-option
              v-for="item in borderTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="color-picker box-margin-left">
          边框色：<el-color-picker @change="handleChangeBorderColor" v-model="tableCellBorderColor" size="mini"></el-color-picker>
        </div>
        <div class="color-picker box-margin-left">
          填充色：<el-color-picker @change="handleChangeBackgroundColor" v-model="tableCellColor" size="mini"></el-color-picker>
        </div>
        <div class="color-picker box-margin-left">
          <el-button @click="handleClearCellStyle" size="small">清除样式</el-button>
        </div>
        <div class="color-picker box-margin-left">
          斑马纹：
          <el-switch
            v-model="isStripe"
          >
          </el-switch>
        </div>
        <div class="color-picker ">
          边框宽度：
          <el-select 
            v-model="borderWidth" 
            placeholder="边框宽度" 
            size="mini" 
            class="border-type"
            @change="handleBorderWidthChange"
          >
            <el-option
              v-for="item in borderWidths"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="color-picker box-margin-left">
          表格：
          <el-popover placement="right" v-model="popoverVisible" trigger="hover">
              <TableSelector 
                :visible="popoverVisible"
                @clicked="({rowNum, columnNum}) => handleTableSelectClick(rowNum, columnNum)"/>
            <i slot="reference" class="el-icon-s-grid" style="cursor: pointer;color: #aaa"></i>
          </el-popover>
        </div>
        <div class="color-picker box-margin-left">
          字体大小：
          <el-input-number size="mini" v-model="fontSize" @change="handleFontSizeChange"></el-input-number>
        </div>
        <div class="color-picker box-margin-left">
          字体颜色：
          <el-color-picker @change="handleChangeFontColor" v-model="tableCellColor" size="mini"></el-color-picker>
        </div>
      </div>
      <CustomTable :cellInitWidth="60" :rowAndCellLength="rowAndCellLength" ref="customTable" :stripe="isStripe" :borderType="borderType"/>
    </div>
    
  </div>
</template>

<script>
import CustomTable from '@/components/custom-table/CustomTable.vue'
import TableSelector from '@/components/table-selector/TableSelector.vue'
export default {
  name: 'App',
  data() {
    return {
      fontSize: 12,
      borderWidth: 1,
      rowAndCellLength: [3,3],
      popoverVisible: false,
      isStripe: false,
      borderType: 'border-full',
      tableCellColor: '#fff',
      tableCellBorderColor: '#aaa',
      borderTypes: [{
        label: '无框线',
        value: 'border-none'
      },{
        label: '所有框线',
        value: 'border-full'
      },{
        label: '外侧框线',
        value: 'border-self'
      },{
        label: '下框线',
        value: 'border-half'
      }],
      borderWidths: [{
          label: '1px',
          value: 1
        },
        {
          label: '2px',
          value: 2
        },
        {
          label: '3px',
          value: 3
        }
      ]
    }
  },
  components: {
    CustomTable,
    TableSelector
  },
  methods: {
    handleChangeBackgroundColor(color) {
      this.$refs.customTable.setCellCommonStyle('backgroundColor', color)
    },

    handleChangeBorderColor(color) {
      this.$refs.customTable.setCellCommonStyle('borderColor', color)
    },

    handleClearCellStyle() {
      this.$refs.customTable.initCellStyle()
    },

    handleTableSelectClick(rowNum, columnNum) {
      this.rowAndCellLength = [rowNum, columnNum]
      this.popoverVisible = false
    },

    handleBorderWidthChange(val) {
      this.$refs.customTable.setCellCommonStyle('borderWidth', val)
    },

    handleFontSizeChange(val) {
      console.log('handleFontSizeChange', val);
      this.$refs.customTable.setCellCommonStyle('fontStyleObject', {
        fontSize: val
      })
    },

    handleChangeFontColor(val) {
      this.$refs.customTable.setCellCommonStyle('fontStyleObject', {
        color: val
      })
    }
  }
}
</script>

<style lang="less">
#app {
  padding: 0;
  margin: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .table-warp {
    background-color: #fff;
    width: 700px;
    margin: 0 auto;
    border: 1px solid #eee;
    height: 100vh;
    .operator {
      padding: 5px;
      background-color: #eee;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      // justify-content: space-between;
      .border-type {
        width: 150px;
        // margin-right: 20px;
      }
      .color-picker {
        height: 35px;
        
        display: flex;
        align-items: center;
      }
      .box-margin-left {
        margin-left: 20px;
      }
    }
  }
}
</style>
